<template>
    <div class="full-screen-container" @dblclick="toggleFullscreen" >
        <header>
            <h1 class="title">国利AI客服外呼系统</h1>
        </header>


        <div class="row">
            <div class="col">
                <div class="panel">
                    <h2>外呼任务24小时统计</h2>
                    <v-chart :option="lineChartOption1" style="width: 100%; height: 200px;"></v-chart>
                </div>
            </div>

          <div class="col">
            <div class="no">
              <div class="no-hd">
                <div style="font-size: 1.4em;">{{ currentTime }}</div>
                <ul>

                <li>公司名称</li>
                <li v-for="(item, index) in filteredData" :key="index">
                  <span class="box">{{ item.companyName }}</span>
                </li>
                </ul>
                <ul>
                  <li>外呼任务名称</li>
                  <li v-for="(item, index) in filteredData" :key="index">
                    <span class="box">{{ item.F_RWMC }}</span>
                  </li>
                </ul>

              </div>

              <div class="no-hd">
                <ul>
                  <li>今日呼入总量</li>
                  <li v-for="(item, index) in filteredData" :key="index">
                    <span class="box">{{ item.F_RWZL }}</span>
                  </li>
                </ul>
              </div>

              <div class="no-hd">
                <ul>
                  <li>今日已呼量</li>
                  <li v-for="(item, index) in filteredData" :key="index">
                    <span class="box">{{ item.completedTasks }}</span>
                  </li>
                </ul>
              </div>

              <div class="no-hd">
                <ul>
                  <li>今日待呼量</li>
                  <li v-for="(item, index) in filteredData" :key="index">
                    <span class="box">{{ item.F_RWSYL }}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

            <div class="col">
                <div class="panel">
                    <h2>不同类型的任务数量</h2>
                    <v-chart :option="barChartOption1" style="width: 100%; height: 200px;"></v-chart>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <div class="panel">
                    <h2>外呼状态分布</h2>
                    <v-chart :option="pieChartOption1" style="width: 100%; height: 200px;"></v-chart>
                </div>
            </div>

          <div class="col">
            <div class="panel transparent-table">
              <h2>呼叫明细</h2>
              <el-tabs v-model="activeTab">
                <el-tab-pane label="已呼明细" name="called">
                  <el-table :data="calledTableData" style="width: 100%; height: 100%">
                    <el-table-column prop="calledUser" label="被叫" width="150"></el-table-column>
                    <el-table-column prop="caller" label="主叫" width="150"></el-table-column>
                    <el-table-column prop="user" label="用户名" width="150"></el-table-column>
                    <el-table-column prop="taskName" label="任务名" width="150"></el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="待呼明细" name="toCall">
                  <el-table :data="toCallTableData" style="width: 100%; height: 100%">
                    <el-table-column prop="calledUser" label="被叫" width="150"></el-table-column>
                    <el-table-column prop="caller" label="主叫" width="150"></el-table-column>
                    <el-table-column prop="user" label="用户名" width="150"></el-table-column>
                    <el-table-column prop="taskName" label="任务名" width="150"></el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>


            <div class="col">
                <div class="panel">
                    <h2>外呼意向分布</h2>
                    <v-chart :option="pieChartOption2" style="width: 100%; height: 200px;"></v-chart>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col">
              <div class="panel table-a">
                <h2>正在外呼</h2>
                <div class="table-container">
                  <el-table :data="tableData">
                    <el-table-column prop="calledUser" label="被叫用户" width="120"></el-table-column>
                    <el-table-column prop="caller" label="主叫" width="120"></el-table-column>
                    <el-table-column prop="user" label="用户" width="120"></el-table-column>
                    <el-table-column prop="duration" label="时长" width="100"></el-table-column>
                  </el-table>
                </div>
              </div>

            </div>

          <div class="col">
            <div class="panel">
              <h2>对话外呼时长分布</h2>
              <v-chart :option="barChartOption2" style="width: 100%; height: 200px;"></v-chart>
            </div>
          </div>

            <div class="col">
                <div class="panel">
                    <h2>对话轮次分布</h2>
                    <v-chart :option="lineChartOption" style="width: 100%; height: 200px;"></v-chart>
                </div>
            </div>
        </div>
    </div>
</template>



<script lang="ts" setup>
  import { useRoute, useRouter } from 'vue-router'
  import axios from 'axios';
  import { ref, onMounted,onUnmounted,onBeforeUnmount } from 'vue'
  import { use } from 'echarts/core'
  import { CanvasRenderer } from 'echarts/renderers'
  import { PieChart, LineChart } from 'echarts/charts'
  import { TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
  import VChart from 'vue-echarts'
  import * as echarts from 'echarts';
  import { ElTable, ElTableColumn } from 'element-plus'
  import 'element-plus/dist/index.css'


  // 注册 ECharts 组件
  use([CanvasRenderer, PieChart, LineChart, TooltipComponent, LegendComponent, GridComponent])

  const router = useRouter()
  const route = useRoute()
  const activeTab = ref('called');
  const filteredData = ref([]); // 声明 filteredData

  const tableData = ref([]);
  const calledTableData = ref([]);
  const toCallTableData = ref([]);

  const toggleFullscreen = () => {
    route.path === '/todayData/show' ? router.push({ name: '实时大屏展示' }) : router.push({ name: '实时大屏管理' })
  }


  const currentTime = ref('')
  const updateTime = () => {
    const dt = new Date()
    const y = dt.getFullYear()
    const mt = dt.getMonth() + 1
    const day = dt.getDate()
    const h = dt.getHours()
    const m = dt.getMinutes()
    const s = dt.getSeconds()
    currentTime.value = `当前时间：${y}年${mt}月${day}日 ${h}时${m}分${s}秒`
    setTimeout(updateTime, 1000)
  }

  onMounted(updateTime)

  const lineChartOption1 = ref({
    color: ['#00f2f1', '#ed3f35'],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      textStyle: {
        color: '#4c9bfd'
      },
      right: '10%'
    },
    grid: {
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,
      borderColor: '#012f4a',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: Array.from({ length: 24 }, (_, i) => `${i}:00`), // 0-23小时
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#4c9bfd'
      },
      axisLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#4c9bfd'
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#012f4a'
        }
      }
    },
    series: [
      {
        name: '任务数量',
        type: 'line',
        smooth: true,
        data: new Array(24).fill(0) // 初始化24个小时的数量为0
      }
    ]
  });

  const pieChartOption1 = ref({
    color: [
      "#006cff", "#60cda0", "#ed8884", "#ff9f7f",
      "#0096ff", "#9fe6b8", "#32c5e9", "#1d9dff"
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      bottom: '2%',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: 'rgba(255,255,255,.5)',
        fontSize: '12'
      }
    },
    series: [
      {
        name: '外呼状态分布',
        type: 'pie',
        radius: ['10%', '70%'],
        center: ['50%', '50%'],
        roseType: 'radius',
        label: {
          fontSize: 10
        },
        labelLine: {
          length: 6,
          length2: 8
        },
        data: [] // 初始化为空数组
      }
    ]
  });


  const barChartOption1 = ref({
    color: ["#2f89cf"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: [
          "预测外呼", "语音通知", "AI外呼不转人工",
          "AI外呼接通转人工", "AI外呼智能转人工"
        ],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        },
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)",
            width: 2
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "任务类型数量",
        type: "bar",
        barWidth: "35%",
        data: [], // 将根据计算结果设置
        itemStyle: {
          barBorderRadius: 5
        }
      }
    ]
  });

  const pieChartOption2 = ref({
    color: [
      "#006cff", "#60cda0", "#ed8884", "#ff9f7f",
      "#0096ff", "#9fe6b8", "#32c5e9", "#1d9dff"
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      bottom: '2%',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: 'rgba(255,255,255,.5)',
        fontSize: '12'
      }
    },
    series: [
      {
        name: '外呼意向分布',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        label: {
          fontSize: 10
        },
        labelLine: {
          length: 6,
          length2: 8
        },
        data: [
          { value: 125, name: 'A' },
          { value: 99, name: 'B' },
          { value: 79, name: 'C' },
          { value: 62, name: 'D' },
          { value: 59, name: 'E' },
          { value: 56, name: 'F' },
          { value: 43, name: 'G' },
          { value: 33, name: 'H' }
        ]
      }
    ]
  })

  const yearData = [
    {
      year: '往年数据',
      data: [
        [45, 5, 15, 51, 52, 76, 32, 84, 83, 8, 10, 73, 53, 5, 6, 8, 4, 4, 6, 3, 6, 8, 2, 17]
      ]
    }
  ]

  const lineChartOption = ref({
    color: ['#00f2f1', '#ed3f35'],
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      textStyle: {
        color: '#4c9bfd'
      },
      right: '10%'
    },
    grid: {
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,
      borderColor: '#012f4a',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [], // 动态设置
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#4c9bfd'
      },
      axisLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#4c9bfd'
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#012f4a'
        }
      }
    },
    series: [
      {
        name: '外呼数量',
        type: 'line',
        smooth: true,
        data: [] // 初始化为空
      }
    ]
  });

  const barChartOption2 = ref({
    color: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"],
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true,
      borderColor: '#012f4a',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#4c9bfd'
      },
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#012f4a'
        }
      }
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        data: ['0-10', '10-20', '20-30', '30以上'],
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#4c9bfd'
        }
      },
      {
        data: [], // 动态设置
        inverse: true,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          color: '#4c9bfd'
        }
      }
    ],
    series: [
      {
        name: "外呼数量占比",
        type: "bar",
        data: [], // 将根据计算结果设置
        yAxisIndex: 0,
        itemStyle: {
          barBorderRadius: 20,
          color: function(params) {
            var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
            return myColor[params.dataIndex % myColor.length];
          }
        },
        barCategoryGap: 50,
        barWidth: 18,
        label: {
          show: true,
          position: "inside",
          formatter: "{c}%"
        }
      },
      {
        type: "bar",
        barCategoryGap: 50,
        barWidth: 18,
        yAxisIndex: 1,
        data: [100, 100, 100, 100],
        itemStyle: {
          color: "none",
          borderColor: "#00c1de",
          borderWidth: 3,
          barBorderRadius: 20
        },
        tooltip: {
          show: false
        },
        label: {
          show: false
        }
      }
    ]
  });



  const fetchData = () => {
    axios.get('http://localhost:9000/knowledgeAdmin/rwjgjf/getTaskTimeData')
        .then(response => {
          const data = response.data.data;

          // 初始化计数器
          const taskCounts = new Array(24).fill(0);
          const callDurationCounts = [0, 0, 0, 0];
          const dialogueRoundsCounts = new Array(31).fill(0); // 对话轮次计数器
          let totalCalls = 0;
          let maxDialogueRounds = 0;

          const today = new Date().toLocaleDateString();

          // 处理数据，计算当天每个小时的任务数量和对话轮次
          data.forEach(item => {
            const taskDate = new Date(item.frwqssj);
            const taskEndDate = new Date(item.frwjssj);
            const taskDateString = taskDate.toLocaleDateString();
            if (taskDateString === today) {
              const hour = taskDate.getHours();
              taskCounts[hour]++;

              // 计算通话时长
              const duration = (taskEndDate - taskDate) / (1000 * 60); // 以分钟为单位
              totalCalls++;

              // 分配到不同区间
              if (duration <= 10) {
                callDurationCounts[0]++;
              } else if (duration <= 20) {
                callDurationCounts[1]++;
              } else if (duration <= 30) {
                callDurationCounts[2]++;
              } else {
                callDurationCounts[3]++;
              }

              // 统计对话轮次
              const dialogueRounds = item.fdhlc;
              if (dialogueRounds <= 30) {
                dialogueRoundsCounts[dialogueRounds]++;
              }
              if (dialogueRounds > maxDialogueRounds) {
                maxDialogueRounds = dialogueRounds;
              }
            }
          });

          // 计算百分比
          const callDurationPercentages = callDurationCounts.map(count => (count / totalCalls * 100).toFixed(2));

          // 动态设置横坐标数据
          lineChartOption.value.xAxis.data = Array.from({ length: maxDialogueRounds + 1 }, (_, i) => `${i}`);
          lineChartOption.value.series[0].data = dialogueRoundsCounts.slice(0, maxDialogueRounds + 1);

          // 更新图表配置
          lineChartOption1.value.series[0].data = taskCounts;
          barChartOption2.value.series[0].data = callDurationPercentages;
          barChartOption2.value.yAxis[1].data = callDurationCounts;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });

    // 获取公司任务数据
    axios.get('http://localhost:9000/task/allTasksWithCompanyName')
        .then(response => {
          const data = response.data.data;


          // 初始化任务类型计数器
          const taskTypeCounts = {
            '预测外呼': 0,
            '语音通知': 0,
            'AI外呼不转人工': 0,
            'AI外呼接通转人工': 0,
            'AI外呼智能转人工': 0,
            '未知状态': 0
          };

          filteredData.value = data.map(task => {

            const callStatus = getTaskType(task.F_RWLX);
            taskTypeCounts[callStatus]++;
            return {
              companyName: task.companyName,
              F_RWZL: task.F_RWZL?task.F_RWZL:0,//今日呼出总量
              F_RWSYL: task.F_RWSYL?task.F_RWSYL:0,//今日待呼量
              completedTasks: (task.F_RWZL?task.F_RWZL:0) - (task.F_RWSYL?task.F_RWSYL:0), // 计算已呼量
              F_RWMC: task.F_RWMC,
              F_RWLX: task.F_RWLX
            };
          });

          // 更新 barChartOption1 的数据
          barChartOption1.value.series[0].data = [
            taskTypeCounts['预测外呼'],
            taskTypeCounts['语音通知'],
            taskTypeCounts['AI外呼不转人工'],
            taskTypeCounts['AI外呼接通转人工'],
            taskTypeCounts['AI外呼智能转人工'],
            taskTypeCounts['未知状态']
          ];
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        })

    axios.get('http://localhost:9000/detail/findAllWithRwmc')
        .then(response => {
          const data = response.data.data;
          const ongoingData = [];
          const calledData = [];
          const toCallData = [];

          // 初始化状态计数器
          const statusCounts = {
            '未开启': 0,
            '进行中': 0,
            '暂停': 0,
            '已完结': 0,
            '拨打时间以外': 0,
            '排队中': 0,
            '已过期': 0
          };

          // 处理数据
          data.forEach(item => {
            const recordOngoing = {
              calledUser: item.fkhsjhm,
              caller: item.fzjhm,
              user: item.fkhsjhmmd5,
              duration: `${item.fzt}s` // Assuming duration is represented by F_ZT
            };

            const recordCalled = {
              calledUser: item.fkhsjhm,
              caller: item.fzjhm,
              user: item.fkhsjhmmd5,
              taskName: item.frwmc
            };

            const recordToCall = {
              calledUser: item.fkhsjhm,
              caller: item.fzjhm,
              user: item.fkhsjhmmd5,
              taskName: item.frwmc
            };

            switch (item.fzt) {
              case 2:
                ongoingData.push(recordOngoing);
                statusCounts['进行中']++;
                break;
              case 4:
                calledData.push(recordCalled);
                statusCounts['已完结']++;
                break;
              case 6:
                toCallData.push(recordToCall);
                statusCounts['排队中']++;
                break;
              case 1:
                statusCounts['未开启']++;
                break;
              case 3:
                statusCounts['暂停']++;
                break;
              case 5:
                statusCounts['拨打时间以外']++;
                break;
              case 7:
                statusCounts['已过期']++;
                break;
              default:
                break;
            }
          });

          // 更新表格数据
          tableData.value = ongoingData;
          calledTableData.value = calledData;
          toCallTableData.value = toCallData;

          // 更新饼图数据
          pieChartOption1.value.series[0].data = [
            { value: statusCounts['未开启'], name: '未开启' },
            { value: statusCounts['进行中'], name: '进行中' },
            { value: statusCounts['暂停'], name: '暂停' },
            { value: statusCounts['已完结'], name: '已完结' },
            { value: statusCounts['拨打时间以外'], name: '拨打时间以外' },
            { value: statusCounts['排队中'], name: '排队中' },
            { value: statusCounts['已过期'], name: '已过期' }
          ];
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });

  };

  const getTaskType = (type) => {
    switch (type) {
      case 0: return '预测外呼';
      case 1: return '语音通知';
      case 2: return 'AI外呼不转人工';
      case 3: return 'AI外呼接通转人工';
      case 4: return 'AI外呼智能转人工';
      default: return '未知状态';
    }
  };

  onMounted(() => {
    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      echarts.getInstanceByDom(document.querySelector('.line .chart'))?.resize();
      echarts.getInstanceByDom(document.querySelector('.panel .chart'))?.resize();
    });

    // 定期获取数据并更新图表
    fetchData();
    const interval = setInterval(fetchData, 5000); // 每5秒更新一次

    // 清理定时器
    onUnmounted(() => {
      clearInterval(interval);
    });
  });


  const handleKeydown = (event) => {

    // 检查按下的键是否为我们感兴趣的键
    if(event.key==='Escape'){

      route.path === '/todayData/show' ? router.push({ name: '实时大屏展示' }) : router.push({ name: '实时大屏管理' })
      // 移除事件监听器
      window.removeEventListener('keydown', handleKeydown);
    }

  }
  //添加监听器
  window.addEventListener('keydown', handleKeydown);




</script>


<style scoped>
    .full-screen-container {
        position: relative; /* 添加相对定位 */
        display: flex;
        flex-direction: column;
        width: 100%; /* 占据父元素的宽度 */
        background-image: url('../assets/images/bg.jpg'); /* 全局背景图片 */
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    header {
        text-align: center;
        padding: 20px;
        color: #fff;
        position: relative; /* 确保时间显示可以相对于header定位 */
    }

    .box {
      display: flex; /* 使用flex布局 */
      justify-content: center; /* 水平居中对齐 */
      align-items: center; /* 垂直居中对齐 */
      padding: 10px;
      border: 1px solid #fff;
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 0.1);
      width: 60%;
      height: 15%;
      text-align: center; /* 确保文字在水平方向上居中 */
    }


    .title {
        font-size: 2.5em; /* 增大字体 */
        color: #fff; /* 白色字体 */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0); /* 添加文本阴影 */
        background-color: rgba(0, 0, 0, 0); /* 半透明背景色 */
        padding: 10px 20px; /* 内边距 */
        border-radius: 10px; /* 圆角边框 */
        display: inline-block; /* 使背景色适应内容宽度 */
        margin: 20px 0; /* 外边距 */
    }

    .showTime {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 1.2em;
        color: #fff; /* 白色字体 */
        background-color: rgba(0, 0, 0, 0); /* 半透明背景色 */
        padding: 5px 10px; /* 内边距 */
        border-radius: 5px; /* 圆角边框 */
    }

    .row {
        display: flex;
        width: 100%;
        margin: 2px 0; /* 行间距 */
    }

    .col {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;

      width: 18%;
    }

    .no-hd ul, .no-bd ul {
      list-style: none;
      padding: 0;
      margin: 10px;
      display: flex;
      justify-content: space-around;
      align-items: center; /* 确保子元素在垂直方向上居中 */
    }


    .no-hd li {
      font-weight: bold;
      color: rgba(255, 235, 123, 0.93);
      font-family: 'Digital-7', sans-serif;
      flex: 1;
    }


    .no-bd li {
      flex: 1;
      font-weight: bold;
      color: #ffeb7b;
      font-family: 'Digital-7', sans-serif;
      font-size: 1.2em;
    }

    .no {
      text-align: center;
      color: #ffeb7b;
      background-color: rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(0, 255, 255, 0.5);
      border-radius: 10px;
      padding: 20px;
      width: 100%;
      max-width: 800px;
      margin: 10px auto;
    }

    .column {
        display: flex;
        margin: 0 0;
        width: 100%; /* 占据父容器的宽度 */
    }

    .panel {
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        padding: 20px;
        color: #fff;
        width: 100%;
        max-width: 1000px;
        box-sizing: border-box;
    }

    .panel h2 {
        text-align: center;
        margin-bottom: 20px;
      color: #fff;
    }
    .table-container {
        height: 100%;
    }
    .el-table {
        height: 100%;
    }

    .table-a {
      position: absolute;
      top: 73%;
      left: 5%;
      width: 25%;
    }

    /**表格背景透明 */
    /*透明化整体*/
    .table-a /deep/ .el-table,
    .el-table__expanded-cell {
      background-color: transparent !important;
    }

    /*透明化行、单元格,删除表头下横线*/
    .table-a /deep/ tr, .table-a /deep/ th, .table-a /deep/ td {
      background: #1439391c !important;
      color: #fff;
      border-bottom: 0px; /*删除表头下横线*/
    }

    /* 删除表格下横线 *//*去除最底下的横线 */
    .table-a ::v-deep .el-table::before {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
    }

    /*hover时样式*/
    .table-a /deep/ .el-table tbody tr:hover > td {
      background-color: #29c2c278 !important;
    }

    /* 表格内容(有用)*/
    .table-a /deep/ .el-table__row {
      background: #1439391c !important;
      color: #46d4ff;
    }

    /* 使表格透明 */
    .transparent-table /deep/ .el-table,
    .transparent-table /deep/ .el-table__expanded-cell {
      background-color: transparent !important;
    }

    .transparent-table /deep/ tr,
    .transparent-table /deep/ th,
    .transparent-table /deep/ td {
      background: #1439391c !important;
      color: #fff;
      border-bottom: 0px; /*删除表头下横线*/
    }

    .transparent-table ::v-deep .el-table::before {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
    }

    .transparent-table /deep/ .el-table tbody tr:hover > td {
      background-color: #29c2c278 !important;
    }

    .transparent-table /deep/ .el-table__row {
      background: #1439391c !important;
      color: #46d4ff;
    }

</style>

